<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<title>Matrix - Responsive Tile-Based Template</title>
<link href="style.css" title="style" rel="stylesheet" type="text/css" />
<link id="clink" href="css/style-blue.css" title="style" rel="stylesheet" type="text/css" media="screen" />
<script src="scripts/jquery.min.js" type="text/javascript"></script>
<script src="scripts/jquery.masonry.min.js" type="text/javascript"></script>
<script src="scripts/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="scripts/MetroJs.lt.js" type="text/javascript"></script>
<script src="scripts/jquery.fancybox-1.3.4.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/jquery.flexslider-min.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/hoverintent.js" type="text/javascript" charset="utf-8"></script>
<script src="scripts/organictabs.jquery.js" type="text/javascript" charset="utf-8"></script>
<!--[if lt IE 9]>
  <style type="text/css">
  @import url("style-ie8.css");
  </style>
  <script src="scripts/css3-mediaqueries.js" type="text/javascript" charset="utf-8"></script>
  <script>
    document.createElement('header');
    document.createElement('nav');
    document.createElement('section');
    document.createElement('article');
    document.createElement('aside');
    document.createElement('footer');
    document.createElement('hgroup');
    </script>
<![endif]-->
<script src="scripts/javascript.js" type="text/javascript"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<div id="bodypat">
<section id="container">
    <div id="colorchanger">
    <a href="?theme=blue" class="cblue cbox" title="Blue Theme"><span class="blue">Blue</span></a>
    <a href="?theme=red" class="cred cbox" title="Red Theme"><span class="red">Red</span></a>
    <a href="?theme=green" class="cgreen cbox" title="Green Theme"><span class="green">Green</span></a>
    <a href="?theme=magenta" class="cmagenta cbox" title="Magenta Theme"><span class="magenta">Magenta</span></a>
    <a href="?theme=purple" class="cpurple cbox" title="Purple Theme"><span class="purple">Purple</span></a>
    <a href="?theme=teal" class="cteal cbox" title="Teal Theme"><span class="teal">Teal</span></a>
    <a href="?theme=lime" class="clime cbox" title="Lime Theme"><span class="lime">Lime</span></a>
    <a href="?theme=brown" class="cbrown cbox" title="Brown Theme"><span class="brown">Brown</span></a>
    <a href="?theme=pink" class="cpink cbox" title="Pink Theme"><span class="pink">Pink</span></a>
    <a href="?theme=mango" class="cmango cbox" title="Mango Theme"><span class="mango">Mango</span></a>
    <h4>Theme Color Selector</h4>
    </div>
<!-- BEGIN HEADER -->
<header class="clearfix">
<!-- BEGIN LOGO -->
<a id="headerlink" href="#" title="home"><img id="logo" src="images/logo.png" alt="logo" /><span id="sitename">Matrix</span></a>
<!-- END LOGO -->

<!-- BEGIN NAVIGATION -->
<nav>
<ul id="nav" class="clearfix">
<!-- Menu Item 1 -->
	<li><a href="index.html" title="Home"><span>Home</span></a></li>
<!-- Menu Item 2 -->
    <li>
    	<a href="#" title="Portfolio"><span>Portfolio</span></a>
        <ul>
        	<li><a href="portfoliotile-large.html" title="Portfolio"><span>Tile - Large</span></a></li>
            <li><a href="portfoliotile-medium.html" title="Portfolio"><span>Tile - Medium</span></a></li>
            <li><a href="portfoliotile-small.html" title="Portfolio"><span>Tile - Small</span></a></li>
            <li><a href="portfoliolist.html" title="Portfolio"><span>Portfolio List</span></a></li>
            <li><a href="singleportfolio.html" title="Portfolio"><span>Single Item</span></a></li>
        </ul>
    </li>
<!-- Menu Item 3 -->
    <li><a href="#" title="Blog"><span>Blog</span></a>
    	<ul>
        	<li><a href="blogtile-large.html" title="Blog"><span>Tile - Large</span></a></li>
            <li><a href="blogtile-medium.html" title="Blog"><span>Tile - Medium</span></a></li>
        	<li><a href="bloglist.html" title="Blog List"><span>Blog List</span></a></li>
        	<li><a href="singleblogpost-1.html" title="Article 1"><span>Single Post</span></a></li>
        </ul>
    </li>
<!-- Menu Item 4 -->
    <li>
    	<a href="#" title="Features"><span>Features</span></a>
        <ul>
        	<li><a href="features-main.html" title="Features"><span>Main Features</span></a></li>
            <li><a href="features-columns.html" title="Features"><span>Columns</span></a></li>
            <li><a href="features-content.html" title="Features"><span>Content Area</span></a></li>
        </ul>
    </li>
<!-- Menu Item 5 -->
    <li class="current"><a href="aboutus.html" title="About"><span>About</span></a></li>
<!-- Menu Item 6 -->
    <li><a href="contact.html" title="Contact"><span>Contact</span></a></li>
</ul>
</nav>
<!-- END NAVIGATION -->
</header>
<!-- END HEADER -->

<!-- BEGIN CONTENT -->
<section id="content" class="clearfix">
<!-- Title --><div id="content-title">About Us</div>

<!-- BEGIN PAGE -->
<section id="page">
<!-- BEGIN PAGE IMAGE -->
<img id="page-img" src="images/pages/aboutus.jpg" alt="About Us" />
<!-- END PAGE IMAGE -->

<!-- BEGIN PAGE CONTENT -->
<div id="pg-content" class="clearfix">

<div id="page-excerpt">
We are dedicated to provide the <span class="themecolortxt">best</span> service in the industry to our clients. With experience of more than a decade in this industry, we are your most reliable partner for your upcoming project.
</div>

<div class="page-sub-title">
<h1>The Team</h1>
<div class="tagline">Some text here. All minifig images below are work by <a href="http://www.flickr.com/photos/mac_filko/">mac_filko</a></div>
</div>

<div id="about-container">
<a href="#" class="no-text-dec">
<div class="about-person">
<img class="about-portrait" src="images/pages/p1.jpg" alt="Person 1" />
<h3>John Doe</h3>
<p>Founder</p>
</div>
</a>

<a href="#" class="no-text-dec">
<div class="about-person">
<img class="about-portrait" src="images/pages/p2.jpg" alt="Person 2" />
<h3>Mark Doe</h3>
<p>Financial Manager</p>
</div>
</a>

<a href="#" class="no-text-dec">
<div class="about-person">
<img class="about-portrait" src="images/pages/p3.jpg" alt="Person 3" />
<h3>Bill Doe</h3>
<p>Operations Manager</p>
</div>
</a>

<a href="#" class="no-text-dec last">
<div class="about-person">
<img class="about-portrait" src="images/pages/p4.jpg" alt="Person 4" />
<h3>Will Doe</h3>
<p>Sales Manager</p>
</div>
</a>

<a href="#" class="no-text-dec">
<div class="about-person">
<h3>Jack Doe</h3>
<p>Human Resources</p>
</div>
</a>

<a href="#" class="no-text-dec">
<div class="about-person">
<h3>Wade Doe</h3>
<p>Team Leader</p>
</div>
</a>

<a href="#" class="no-text-dec">
<div class="about-person">
<h3>Jill Doe</h3>
<p>Team Leader</p>
</div>
</a>

<a href="contact.html" class="no-text-dec last">
<div class="about-person">
<h3>You</h3>
<p>Call Us!</p>
</div>
</a>
</div>

<div class="page-sub-title">
<h1>Testimonials</h1>
<div class="tagline">Our awesome clients <span class="whitetxt">love us</span></div>
</div>

<div id="about-testimonial" class="clearfix">

    <div class="testimonial-1">
    <div class="quote-w">
    I have been a client of this company for 5 years and they have never disappointed me. They always complete their work ahead of schedule without sacrificing quality. We will continue working with them in the coming years.
    </div>
    <div class="testimonial-author">- John Doe</div>
    </div>
    
    <div class="testimonial-s">
    <p>Donec lobortis, odio nec consequat posuere, diam nibh gravida augue, non ultrices felis diam in est. Ut est nisl, bibendum non mattis ultrices, ultrices quis velit. Aliquam erat volutpat. Proin ut tellus nulla. Nam tincidunt egestas risus eu dignissim. Donec gravida elit quis dolor accumsan nec cursus metus tincidunt. Duis.</p>
    <div class="testimonial-author themecolortxt">- John Doe</div>
    </div>
    <div class="testimonial-s">
    <p>Duis a velit leo, at dapibus est. Vestibulum ut enim eu est pretium aliquet. Donec porta porttitor purus iaculis molestie. Mauris cursus, tortor vitae facilisis ultricies, sapien eros viverra elit, a accumsan neque purus id ante. Maecenas non mauris augue, id tempus magna. Phasellus viverra ultrices tortor non iaculis. Nulla.</p>
    <div class="testimonial-author themecolortxt">- John Doe</div>
    </div>
    <div class="testimonial-s last">
    <p>Sed fringilla lacinia turpis, vitae iaculis neque placerat ut. In rutrum fermentum cursus. Praesent mattis molestie nulla ac porttitor. In convallis felis at neque tempus vestibulum. Aenean ac consequat enim. Mauris et mauris erat. Sed malesuada placerat dapibus. Maecenas vehicula, quam eu convallis tristique, dui nisi lacinia velit, ac iaculis.</p>
    <div class="testimonial-author themecolortxt">- John Doe</div>
    </div>
</div>

</div><!-- end #pg-content -->
<!-- END PAGE CONTENT -->
</section>
<!-- END PAGE -->
</section>
<!-- END CONTENT -->

<!-- BEGIN FOOTER -->
<footer class="clearfix">

<div id="footer-social">
<a href="#"><span class="behance-mini"></span></a>
<a href="#"><span class="twitter-mini"></span></a>
<a href="#"><span class="facebook-mini"></span></a>
<a href="#"><span class="linkedin-mini"></span></a>
<a href="#"><span class="pinterest-mini"></span></a>
<a href="#"><span class="dribbble-mini"></span></a>
</div><!-- end #footer-social -->

<small>&copy; Copyright &copy; 2013.Company name All rights reserved.<a target="_blank" href="http://www.cssmoban.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a> - <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a></small>
</footer>
<!-- END FOOTER -->

</section><!-- end #container -->
</div>

</body>
</html>
